import {
  AlipayCircleOutlined,
  TaobaoCircleOutlined,
  WeiboCircleOutlined,
  UserOutlined,
} from '@ant-design/icons';
import { Alert, Checkbox, Form, Input, Image, Button } from 'antd';
import React, { useState } from 'react';
import { Link, connect, Dispatch, useRequest, useModel } from 'umi';
import { StateType } from '@/models/login';
import { LoginParamsType, getCaptchaImage } from '@/services/login';
import { ConnectState } from '@/models/connect';
import styles from './style.less';

interface LoginProps {
  dispatch: Dispatch;
  userLogin: StateType;
  submitting?: boolean;
}

const LoginMessage: React.FC<{
  content: string;
}> = ({ content }) => <Alert message={content} type="error" showIcon closable />;

const Login: React.FC<LoginProps> = (props) => {
  const { userLogin, submitting } = props;
  const { success, msg } = userLogin;
  const [autoLogin, setAutoLogin] = useState(true);
  const { refresh } = useModel('@@initialState');
  // 验证码
  const { data: captchaImage, refresh: refreshCaptchaImage } = useRequest(getCaptchaImage, {
    formatResult: (res) => res,
  });

  const handleSubmit = (values: LoginParamsType) => {
    const { dispatch } = props;
    dispatch({
      type: 'login/login',
      payload: { ...values, uuid: captchaImage.uuid },
      success() {
        refresh();
      },
      error() {
        refreshCaptchaImage();
      },
    });
  };
  return (
    <div className={styles.main}>
      <Form onFinish={handleSubmit}>
        <Form.Item>{!success && !submitting && <LoginMessage content={msg} />}</Form.Item>
        <Form.Item name="username" rules={[{ required: true, message: '请填写用户名!' }]}>
          <Input
            size="large"
            prefix={<UserOutlined className="site-form-item-icon" style={{ color: '#1890ff' }} />}
            placeholder="用户名"
          />
        </Form.Item>
        <Form.Item name="password" rules={[{ required: true, message: '请填写密码!' }]}>
          <Input
            size="large"
            prefix={<UserOutlined className="site-form-item-icon" style={{ color: '#1890ff' }} />}
            type="password"
            placeholder="密码"
          />
        </Form.Item>
        <Form.Item>
          <Form.Item noStyle name="code" rules={[{ required: true, message: '请填写验证码!' }]}>
            <Input style={{ width: 220 }} size="large" placeholder="验证码" />
          </Form.Item>
          {!captchaImage ? null : (
            <Image
              onClick={refreshCaptchaImage}
              style={{ display: 'inline-block', float: 'right', cursor: 'pointer' }}
              width={110}
              height={40}
              src={'data:image/gif;base64,' + captchaImage.img}
            />
          )}
        </Form.Item>

        <div>
          <Checkbox checked={autoLogin} onChange={(e) => setAutoLogin(e.target.checked)}>
            自动登录
          </Checkbox>
          <a
            style={{
              float: 'right',
            }}
          >
            忘记密码
          </a>
        </div>
        <Form.Item>
          <Button
            className={styles.submit}
            block
            type="primary"
            htmlType="submit"
            loading={submitting}
          >
            登录
          </Button>
        </Form.Item>
        <div className={styles.other}>
          <span className={styles.register}>
            还没有账号?&nbsp;&nbsp;
            <Link to="/user/register">注册账户</Link>
          </span>
        </div>
      </Form>
    </div>
  );
};

export default connect(({ login, loading }: ConnectState) => ({
  userLogin: login,
  submitting: loading.effects['login/login'],
}))(Login);
